<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">

    <!-- Bootstrap core CSS -->
    <link href="${ctx!}/assets/dist/css/bootstrap.min.css" rel="stylesheet">

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <link href="${ctx!}/assets/dist/css/ie10-viewport-bug-workaround.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="${ctx!}/assets/css/header.css" rel="stylesheet">
    <link rel="stylesheet" href="${ctx!}/assets/dist/css/font-awesome.min.css">
    <link rel="stylesheet" href="${ctx!}/assets/css/index.css">
    <link href="${ctx!}/assets/css/admin-main.css" rel="stylesheet">
    <link href="${ctx!}/assets/css/alarm.css" rel="stylesheet">


    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]>
    <script src="${ctx!}/assets/dist/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="${ctx!}/assets/dist/js/ie-emulation-modes-warning.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>

     <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="${ctx!}/assets/js/jquery.min.js?v=2.1.4"></script>
    <script src="${ctx!}/assets/js/bootstrap.min.js?v=3.3.6"></script>
    <!-- Just to make our placeholder images work. Don't actually copy the next line! -->
    <script src="${ctx!}/assets/dist/js/vendor/holder.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="${ctx!}/assets/dist/js/ie10-viewport-bug-workaround.js"></script>
    <script src="${ctx!}/assets/js/plugins/layer/layer.min.js"></script>
    <script src="${ctx!}/assets/js/plugins/layer/laydate/laydate.js"></script>
    <![endif]-->
    <style>

        <#--5.75*9.32-->
        <#--中心店：2.28,2.27-->
        .clicklabel {
            z-index: 10;
            position: absolute;
            width: 180px;
            height: 80px;
            display: none;
            background: url("${ctx!}/assets/img/map_panel.png");
            background-size: 100% 100%;
        }

        .layui-layer-title {
            background-color: #1a2f42 !important;
            color: white !important;
        }
    </style>

</head>

<body style="top: 0!important;  padding-top: 0!important;">

<div class="col-sm-9">
    <div>
        <img style="margin-left:8%;margin-top:5%;height: 70%; width: 70%" src="${ctx}/assets/img/map.jpg" alt=""
             id="confPic">
    </div>
</div>

<div class="col-sm-3  right-box" style="bottom: 0;">
    <div class="row">
        <div hidden="hidden" class="pro-box">
            <div class="pro-title">
                <h3>${currProject.name}</h3>
                <div>
                    <img class="img-box" src="${ctx!}/assets/img/title-bar.png">
                </div>

            </div>
            <div>
                <div class="text-panel">
                    <textarea class="text" rows="5" readonly="readonly">${currProject.description}</textarea>
                    <div style="float: right">
                        <div style=" display:inline; margin-right: 5px">
                            <img src="${ctx!}/assets/img/eye.png">
                        </div>
                        <div style="display:inline; margin-right: 15px"><a href="javascript:void(0);" onclick="show_detail();">查看详情</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <#if currProject??>
        <div style="width: 100%">
            <div class="equipment-title">项目略图</div>
            <img onclick="imageClick()"
                 style="cursor: pointer;margin-left:10px;margin-right:20px;margin-top:60px;max-width: 93%;"
                 src="${ctx!}${currProject.panel}">
        </div>
    </#if>

    <div class="row">
        <div class="equipment-title">设备内容</div>
        <div class="equipment-box">
            <#if (currProject.equipmentTypeList?size > 0)>
                <#list currProject.equipmentTypeList?sort_by(["typeName", "name"]) as type>
                    <#if (type.equipments?size>0)>
                        <div>
                            <div class="device-num">
                                ${type.equipments?size}
                            </div>
                            <div class="equipment-name">
                                ${type.typeName.name}
                            </div>
                            <div class="triangle-right"></div>
                        </div>
                        <div class="device-line">
                            <#if (type.equipments?size> 0) >
                                <#list type.equipments as equipment>
                                    <span>${equipment.name}</span>
                                </#list>
                            </#if>
                        </div>
                    </#if>
                </#list>

            </#if>

        </div>
    </div>

</div>

<script type="application/javascript">

    /**
     * 单击项目略图显示大图
     */
    function imageClick() {
        layer.open({
            type: 1,
            title: false,
            zIndex: 1000,
            closeBtn: 1,
            shade: true,
            shade: [0.5],
            shadeClose: true,
            area: ['1000px', '600px'],
            skin: 'shadows',
            content: "<div style=\"height: 450px;width: 700px;\">\n" +
                "    <img style=\"height:550px;width:1000px;object-fit: fill;margin: 0 auto\" src=\"${ctx}${currProject.panel}\">\n" +
                "</div>"
        });
    }

    function show_detail() {
        <#--layer.alert("${currProject.description}", {title: '项目介绍'});-->
        layer.open({
            type: 2,
            title: '项目介绍',
            shadeClose: true,
            shade: false,
            area: ['893px', '460px;'],
            content: "${ctx!}/web/project/detail",

        });
    }

    window.onload = function () {
        //获取地图的位置信息，比如偏移，高度
        var confPicPos = $("#confPic").offset();
        confPicPos["width"] = $("#confPic").width();
        confPicPos["height"] = $("#confPic").height();
        var deltax = 20, deltay = 10;

        //绘制企业所在地
        <#if (enterprise.panelX)?? && (enterprise.panelY)??>
        drawLabel(0, ${enterprise.panelX} * confPicPos.width,
        ${enterprise.panelY} *
        confPicPos.height, "${enterprise.city}", "${enterprise.name}", "orange", 16
    )
        ;
        </#if>

        //绘制项目所在地
        <#list projects as project>
        <#if (project.panelX)?? && (project.panelY)??>
        drawLabel(${project.id}, ${project.panelX} * confPicPos.width,
        ${project.panelY} *
        confPicPos.height, "${project.city}", "${project.name}",
            <#if currProject.id==project.id>
            "red"
        <#else>
        "yellow"
            </#if>
            , 10
    )
        ;
        </#if>
        </#list>

        //绘制项目面板
        function drawLabel(id, x, y, cityname, projectname, color, size) {
            var top_value = document.getElementById("confPic").offsetTop + document.body.scrollTop;
            var left_value = document.getElementById("confPic").offsetLeft + document.body.scrollLeft; //left
            <#--${currProject.panel}-->
            var _circle = "<span id='circle' onmouseleave='circleLeave(event)' onmouseover='circleOver(event)' item=" + id + " style=\'position:absolute;z-index:9;border-radius: 50%;cursor:pointer;background-color: " + color + ";width: " + size + "px;height: " + size + "px;display: inline-block;top:" + (top_value + y) + "px;left: " + (left_value + x) + "px;\'></span>"

            var _labelhtml = '<div  id="panel' + id + '" style="top:' + (top_value + y + deltay) + 'px;left: ' + (left_value + x + deltax) + 'px" class="clicklabel">' +
                '<p style="margin-left: 10px;color: white;margin-top: 2px;font-weight: 600;">' + cityname + '</p><p style="margin-left: 10px;">' + projectname + '</p>'
                + '</div>';
            $(_labelhtml).insertAfter('#confPic')
            $(_circle).insertAfter('#confPic')
        }

        var timeoutID = null;
        $("#panel0").show();
        $("#panel").on('click', function (e) {
            console.log("onclick");
            clearTimeout(timeoutID);
            timeoutID = window.setTimeout(function () {
                $(".right-box").removeAttr("hidden");
            }, 300);
        });

        $("#circle").on('dblclick', function (e) {
            clearTimeout(timeoutID);
            $("#device-monitor", window.parent.document).addClass("current").siblings().removeClass("current");
            window.location.href = "${ctx!}/web/project/device";
        });
    };

    function circleOver(e) {
        var id = "panel" + $(e.target).attr("item");
        $("#panel0").hide();
        $("#" + id).show();
    }

    function circleLeave(e) {
        var id = parseInt($(e.target).attr("item"))
        $("#" + "panel" + id).hide();
        $("#panel0").show();
    }


</script>


</body>
</html>
